<script lang="ts" setup>
import {UserVo} from "@/dto/User/User.ts";
import {Hide, RefreshRight, Setting, TakeawayBox} from "@element-plus/icons-vue";
import {BasicText} from "@/common/BasicText.ts";
import {ref, watch} from "vue";
import PageConfig from "@/module/PageConfig/PageConfig.vue";
import {Page} from "@/common/Page.ts";
import {Column} from "@/common/Column.ts";
import {DropdownInstance, ElMessage} from "element-plus";
import Upload from "@/module/upload/upload.vue";


const {
  data,
  page,
  columnList
} = defineProps<{
  page: Page
  data: any[]
  columnList: Array<Column>
}>()

const filtration = ref(false)
const selection = ref(true)
const no = ref(true)
const controls = ref(true)
const editDialog = ref(true)
const pageConfig = ref(Page.initPage)
const colums = ref<Array<Column>>(columnList)
const columNameList = ref<Array<string>>([])
const settingRef = ref<DropdownInstance>()
const checkAll = ref(false)
const isIndeterminate = ref(true)
const emit = defineEmits(["init","selection","current"])

watch(page, () => {
  pageConfig.value = page
})

/**
 * 点击筛选
 */
function filtrationClick() {
  filtration.value = !filtration.value
}

/**
 * 点击刷新
 */
async function refreshClick() {
  ElMessage.success("刷新成功")
    console.log(pageConfig.value)
  emit('init', pageConfig.value)
}

/**
 * 打开设置
 */
function openSetting() {
  settingRef.value?.handleOpen()
}

/**
 * 表格字段是否全选
 * @param val 是/否
 */
function handleCheckAllChange(val: boolean) {
  columNameList.value = val ? columnList.map(item => item.label ?? "") : []
  console.log(colums.value)
  isIndeterminate.value = false
  updateColum()
}

/**
 * 表格字段选择
 * @param val 表格字段
 */
function handleCheckedCitiesChange(val: Array<string>) {
  const count = val.length
  checkAll.value = count === columnList.length
  isIndeterminate.value = count > 0 && count < columnList.length
  columNameList.value = val
  updateColum()
}

/**
 * 当表格字段改变时触发此方法
 */
function updateColum() {
  let list = []
  columnList.forEach(item => {
    columNameList.value.forEach(name => {
      if (item.label == name) {
        list.push(item)
      }
    })
  })
  colums.value = list
}

/**
 * 表格多选
 * @param val 表格字段
 */
function handleSelectionChange(val: []) {
    emit("selection",val)
}
/**
 * 表格单选
 * @param val 表格字段
 */
function handleCurrentChange(val: any) {
    emit("current",val)
}
</script>

<template>
  <el-row class="mt_10">
   <el-col :span="8">
       <slot name="header-button"/>
   </el-col>
    <el-col :offset="13" :span="3">
      <el-tooltip
          class="box-item"
          effect="dark"
          :content="BasicText.filtration"
          placement="top-start"
      >
        <el-button @click="filtrationClick">
          <el-icon>
            <Hide/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip
          class="box-item"
          effect="dark"
          :content="BasicText.refresh"
          placement="top-start"
      >
        <el-button @click="refreshClick">
          <el-icon>
            <RefreshRight/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip
          class="box-item"
          effect="dark"
          :content="BasicText.setting"
          placement="top-start"
          @click="openSetting"
      >
        <el-dropdown trigger="click">
          <el-button style="margin-left: 10px;">
            <el-icon>
              <Setting/>
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-card style="width: 250px;">
              <el-divider>
                表格字段
              </el-divider>
              <el-row>
                <el-col :span="24">
                  <el-checkbox
                      label="全部"
                      v-model="checkAll"
                      :indeterminate="isIndeterminate"
                      @change="handleCheckAllChange"/>
                  <el-checkbox-group
                      v-model="columNameList"
                      @change="handleCheckedCitiesChange"
                  >
                    <el-checkbox
                        v-for="colum in columnList" :key="colum.label"
                        :label="colum.label"/>
                  </el-checkbox-group>
                </el-col>
              </el-row>
              <el-divider>
                表单配置
              </el-divider>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="多选">
                    <el-switch v-model="selection"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="序号">
                    <el-switch v-model="no"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="操作">
                    <el-switch v-model="controls"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          </template>
        </el-dropdown>
      </el-tooltip>
    </el-col>
  </el-row>
  <div :class="filtration?'card-open':'card-down'"></div>
  <el-table
      stripe
      :data="data"
      border
      header-row-class-name="table-header"
      :class="filtration?'table-open':'table-down'"
      highlight-current-row
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
  >
    <template #empty>
      <el-empty :description="BasicText.description"/>
    </template>
    <el-table-column
        v-if="selection"
        type="selection"
        width="55"/>
    <el-table-column
        v-if="no"
        type="index"
        label="序号"
        width="80px"
        fixed="left"
        :index="(i)=>(pageConfig.page-1)*pageConfig.pageSize + i +1"
    />
    <el-table-column
        v-for="colum in colums"
        :label="colum.label"
        :prop="colum.prop"
    >
        <template #default="{row}">
            <slot name="column" :row="row" :column="colum">
                {{row[colum.prop]}}
            </slot>
        </template>
    </el-table-column>
    <el-table-column v-if="controls" label="操作">
      <template #default="{row}">
          <slot name="controls" :row="row"/>
      </template>
    </el-table-column>
  </el-table>
  <page-config style="text-align: center" v-model="pageConfig" @initTable="()=>emit('init',pageConfig)"/>
</template>

<style scoped>

.table-open {
  border: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8 !important;
  border-top: 0;
  height: calc(100vh - 350px) !important;
  transition: height 0.5s;
}

.table-down {
  border: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8 !important;
  border-top: 0;
  height: calc(100vh - 250px) !important;
  transition: height 0.5s;
}

.card-open {
  background: white;
  height: 100px;
  transition: height 0.5s;
}

.card-down {
  background: white;
  height: 0;
  transition: height 0.5s;
}
</style>